/**
 * 增强版指标卡片 - 超大字号、渐变色彩、动态徽章
 */
import React, { useState, useEffect } from 'react';
import { TrendingUp, TrendingDown } from 'lucide-react';

interface EnhancedMetricCardProps {
  title: string;
  value: number;
  unit?: string;
  trend?: {
    value: number | string;
    isUp: boolean;
  };
  previousValue?: number;
  isFullscreen?: boolean;
  onClick?: () => void;
}

const EnhancedMetricCard: React.FC<EnhancedMetricCardProps> = ({
  title,
  value,
  unit = '',
  trend,
  previousValue,
  isFullscreen = false,
  onClick,
}) => {
  const [displayValue, setDisplayValue] = useState(previousValue || value);
  const [showFloatTip, setShowFloatTip] = useState(false);
  const [floatTipValue, setFloatTipValue] = useState(0);

  // 数字滚动动画
  useEffect(() => {
    if (displayValue !== value) {
      const diff = value - displayValue;
      setFloatTipValue(diff);
      setShowFloatTip(true);

      const duration = 1000;
      const startTime = Date.now();
      const startValue = displayValue;

      const animate = () => {
        const now = Date.now();
        const elapsed = now - startTime;
        const progress = Math.min(elapsed / duration, 1);
        const easeOutCubic = 1 - Math.pow(1 - progress, 3);
        const currentValue = startValue + (value - startValue) * easeOutCubic;

        setDisplayValue(Math.floor(currentValue));

        if (progress < 1) {
          requestAnimationFrame(animate);
        } else {
          setDisplayValue(value);
          setTimeout(() => setShowFloatTip(false), 2000);
        }
      };

      requestAnimationFrame(animate);
    }
  }, [value, displayValue]);

  const fontSize = isFullscreen ? 'text-5xl' : 'text-3xl';
  const titleSize = isFullscreen ? 'text-xl' : 'text-sm';

  return (
    <div
      onClick={onClick}
      className={`relative bg-white/80 backdrop-blur-sm rounded-lg p-5 border border-gray-200/60 hover:border-gray-300/80 hover:bg-white/90 transition-all duration-200 ${onClick ? 'cursor-pointer' : ''
        } ${isFullscreen ? 'p-6' : ''}`}
    >
      {/* 浮动提示 */}
      {showFloatTip && floatTipValue > 0 && (
        <div className="absolute top-2 right-2 text-gray-500 font-medium text-xs z-10">
          +{floatTipValue.toLocaleString()}
        </div>
      )}

      {/* 标题 */}
      <div className={`${titleSize} font-medium text-gray-600 mb-3`}>{title}</div>

      {/* 数值 - 适中字号 + 简洁色彩 */}
      <div className="mb-3">
        <div
          className={`${fontSize} font-semibold text-gray-900`}
        >
          {displayValue.toLocaleString()}
          {unit && <span className="text-lg ml-1.5 text-gray-500 font-normal">{unit}</span>}
        </div>
      </div>

      {/* 增长率徽章 - 低调灰色样式 */}
      {/* 增长率徽章 - 优化色彩与类型安全 */}
      {/* 增长率徽章 - 优化色彩与类型安全 */}
      <div className="flex items-center gap-2">
        <div
          className={`flex items-center gap-1 px-2 py-1 rounded text-xs font-medium ${trend?.isUp ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'
            }`}
        >
          {trend?.isUp ? <TrendingUp size={12} /> : <TrendingDown size={12} />}
          <span>
            {trend?.isUp ? '↑' : '↓'} {Math.abs(trend?.value as number || 0).toFixed(1)}%
          </span>
        </div>
        <span className="text-xs text-gray-400">较上期</span>
      </div>
    </div>
  );
};

export default EnhancedMetricCard;


